<script setup lang="ts">
import { ref } from 'vue'
import TheWelcome from '../components/TheWelcome.vue'

const zenText = ref<string | null>(null)
const loading = ref(false)
const error = ref<string | null>(null)

async function fetchZen() {
  zenText.value = null
  error.value = null
  loading.value = true
  try {
    const res = await fetch('https://api.github.com/zen')
    if (!res.ok) throw new Error(`HTTP ${res.status}`)
    const text = await res.text()
    zenText.value = text
  } catch (err: any) {
    error.value = err?.message ?? String(err)
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <main>
    <div style="margin-bottom:1rem">
      <button @click="fetchZen" :disabled="loading">
        {{ loading ? '加载中...' : '获取 GitHub Zen' }}
      </button>
    </div>

    <div v-if="loading">正在请求中，请稍候…</div>
    <div v-else-if="error" style="color:var(--color-danger, #c00)">错误：{{ error }}</div>
    <div v-else-if="zenText">返回：{{ zenText }}</div>

    <TheWelcome />
  </main>
</template>
